<template>
	<view class="container">
		<zzx-calendar @selected-change="datechange"></zzx-calendar>
		<!-- 历史时间轴 -->
		<view class="steps">
			<view class="current">{{currentDate}}</view>
			<view class="steps-item" v-for="(item, index) of history" :key="index">
				<view class="steps-time">{{ item.lsdate }}</view>
				<view class="steps-desc">{{ item.title }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {toast} from '@/static/js/toast.js'
export default {
	data() {
		return {
			currentDate: '',
			history: []
		};
	},
	onLoad() {
		this.getToday()
		this.getData(this.currentDate);
	},
	methods: {
		datechange(e) {
			let m = e.fullDate.substr(5, 2)
			let d = e.fullDate.substr(8, 2)
			this.currentDate = m + d
			this.getData(this.currentDate)
		},
		getToday(){
			let date = new Date();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			if (m < 10) {
				m = '0' + m;
			}
			if (d < 10) {
				d = '0' + d;
			}
			this.currentDate = m + '' + d
		},
		getData(d) {
			toast('加载中...', 'none')
			uni.request({
				url: '//api.tianapi.com/txapi/lishi/index',
				data: {
					key: '1b9c3413d260a216a6395830bdfbaf34',
					date: d
				},
				success: res => {
					uni.hideToast()
					let data = res.data.newslist;
					this.history = data.reverse();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	overflow: hidden;
}
.current{
	position: relative;
	z-index: 999;
	margin-left: 100rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100rpx;
	height: 100rpx;
	color: #fff;
	background-color: #FF6633;
	border-radius: 50%;
	border: 1rpx solid #FF6633;
}
.steps {
	position: relative;
	margin: 20rpx;
	&:before {
		content: '';
		position: absolute;
		left: 150rpx;
		top: 20rpx;
		bottom: 10rpx;
		border-left: 1rpx solid #eee;
	}
	.steps-item {
		margin-bottom: 30rpx;
		display: flex;
		align-items: baseline;
	}
	.steps-time {
		position: relative;
		font-size: 24rpx;
		width: 140rpx;
		flex-shrink: 0;
		&:after{
			content: "";
			position: absolute;
			right: -21rpx;
			top: 7rpx;
			width: 20rpx;
			height: 20rpx;
			background-color: #FF6633;
			border-radius: 50%;
		}
	}
	.steps-desc {
		margin-left: 30rpx;
		font-size: 32rpx;
	}
}
</style>
